<template>
  <div class="content">
    <div class="login-content">
        <a class="banner-box"></a>
        <div class="login-box">
            <h2 class="login-title">账号登录</h2>
            <label for="账号">账号:</label><input type="text" placeholder="请输入账号" v-model="username">
            <p><label for="密码">密码:</label><input type="text" placeholder="请输入密码" v-model="password"></p>
            <button @click="Login" class="dl">登录</button>
        </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import {ref} from 'vue';
import {useRouter} from 'vue-router';
import {useStore} from '../store/user';
const username = ref('')
const password = ref('')
const store = useStore()

const router = useRouter()
const Login = async () => {
    const res = await axios.post('http://localhost:8080/login',
        { username:username.value, password:password.value }
    )
    console.log(username,password)
    console.log(res)
    if(res.status == 200){
        store.token = res.data.token
        console.log(store.token);
        alert('登录成功')
        router.push('/')
    }
}

</script>

<style scoped>
.content{
    text-align: center;
    background-color: antiquewhite;
}
.content label{
    margin-left: 15px;
    margin-right:15px;
}
.login-title{
    margin-top: 5px;
}
button{
    width:10%;
    background: skyblue;
    transition: border-color 0.25s;
    border-radius: 8px;
    border: 1px solid transparent;
    padding: 0.6em 1.2em;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    place-items: center;
}
.dl{
    margin: auto;
    width: 100px;
    height: 40px;
}
</style>